import { useState, useLayoutEffect } from 'react';

export interface FloatTextOptions {
  message?: string;
  duration?: number;
}

export function useFloatText(options: Partial<FloatTextOptions>) {
  const {
    message = '',
    /* duration = 3000, */
  } = options;

  const [showMessage, setShowMessage] = useState<string>('');

  useLayoutEffect(() => {
    let t: NodeJS.Timeout | null = null;

    function getShowMessageSetter() {
      let index = 0;
      return function showMessageSetter() {
        if (index < message.length) {
          setShowMessage(showMessage => showMessage += message[index++]);
          t = setTimeout(showMessageSetter, 50);
        }
      }
    }

    const showMessageSetter = getShowMessageSetter();

    showMessageSetter();
  }, [message]);

  return showMessage;
}